<template>
    <div class="main-container login-contain hoder-left" ref="loginHei">
        <div class="seperate-margin"></div>
        <mt-field placeholder="手机号码" type="tel" :disableClear=true :attr="{ maxlength: 11}"
                  v-model="user.userPhone" @change="updateUserPhone" :state="validatePhone(user.userPhone)"></mt-field>
        <mt-field type="number" placeholder="验证码" :disableClear=true :attr="{ maxlength: 4 }" class="captcha-contain"
                  v-model="user.captcha" @change="updateUserCaptcha" :state="validateCaptcha(user.captcha)">
            <mt-button type="primary" v-show="canGetCaptcha" @click="getCaptchaCode" class="code--get" :disabled="getCaptchaDisable">获取验证码</mt-button>
            <timerTask :timerVisible="!canGetCaptcha" @limitCancel="timerCancel"></timerTask>
        </mt-field>
        <mt-button v-dbClick class="login-btn" type="primary" size="large" @click="login">登录</mt-button>
    </div>
</template>
<script>
    import * as publicMethod from 'util/util';
    import {mapState, mapGetters, mapActions} from 'vuex';
    import {loginMd} from 'store/modules/types';
    import Schema from 'async-validator';
    import {validatePhoneNum} from 'util/asyncValidator';
    export default{
        data(){
            return{
                user: {
                    userPhone: null,
                    captcha: null
                },
                canGetCaptcha: true,
                getCaptchaDisable: true
            }
        },
        methods: {
            ...mapActions({
                'getPhone': loginMd.A.GET_PHONE,
                'getCaptcha': loginMd.A.GET_CAPTCHA,
                'quickLogin': loginMd.A.QUICK_LOGIN,
                'getAuthCode': loginMd.A.GET_AUTH_CODE,
            }),
            validatePhone(value) {//手机号实时格式校验
                if(!!value && value.toString().isPhone()) {
                    this.getCaptchaDisable = false;
                    return "success"
                }
            },
            validateCaptcha(value) {//短信验证码实时校验
                if(!!value && value.toString().length == 4) {
                    return "success"
                }
            },
            getCaptchaCode() {//获取短信验证码
                this.getAuthCode(this.user.userPhone).then( () => {
                    this.canGetCaptcha = false;
                });
            },
            timerCancel(value) {//定时器结束
                this.canGetCaptcha = !!value ? true : false;
            },
            updateUserPhone(value) {
                this.getPhone(value);
            },
            updateUserCaptcha(value) {
                this.getCaptcha(value);
            },
            login() {
                var descriptor = {
                  user: {
                    type: "object", required: true,
                    fields: {
                      userPhone: {type: "string", validator: validatePhoneNum},
                      captcha: {type: "string", required: true,message: '请输入格式正确的验证码'},
                    }
                  }
                }
                var validator = new Schema(descriptor);
                validator.validate({ user: this.user }, (errors, fields) => {
                    if(errors) {
                        let currMessage = errors[0].message;
                        publicMethod.errorPrompt(currMessage);
                        return ;
                    }
                    this.quickLogin(this.user);
                });
            }
        },
        mounted() {
            this.$refs.loginHei.style.height = window.innerHeight + "px";//全屏被挤压修复
        }
    }
</script>
<style lang="scss" scoped>
    @import "./../../assets/sass/main";
    .seperate-margin{
        height: 1.6rem;
    }
    .login-contain{
        padding: 0 .7rem;
        background: url("http://aplus-img.img-cn-beijing.aliyuncs.com/20170607144409_m8OZ18MHeEFPxmwgPhk.png") no-repeat center bottom $bgWhite;
        background-size: contain;
    }
    .code--get{
        @include fontDpr(12px);
        height: .7rem;
        border-radius: .3rem;
    }
    .login-btn{
        margin-top: 1.5rem;
        height: .9rem;
        border-radius: .45rem;
    }
    .captcha-contain{
        margin-top: .5rem;
    }
</style>
